import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import _ from 'lodash';
import styles from './styles';

const TYPES = [
  'primary',
  'danger',
  'normal',
  'success',
  'warning',
  'cancel',
  'opacity',
  'disabled'
];
const SIZES = ['normal', 'large', 'small'];
const STYLE = {
  primary: { color: '#fff', backgroundColor: '#3399ff' },
  danger: { color: '#fff', backgroundColor: '#ff4d4d' },
  normal: { color: '#666', backgroundColor: '#fff' },
  success: { color: '#fff', backgroundColor: '#33cc33' },
  warning: { color: '#fff', backgroundColor: '#ff9900' },
  cancel: { color: '#ff4d4d', backgroundColor: '#fff' },
  opacity: { color: '#ff4d4d' },
  disabled: { color: '#999', backgroundColor: '#ccc' }
};

export default ({
  title,
  onPress = v => v,
  size,
  type,
  bgColor = '#fff',
  titleColor = '#666',
  titleSize = 16,
  icon = null,
  disabled,
  style
}) => {
  let _type = type;
  if (disabled) {
    _type = 'disabled';
  }
  const tColor = _.includes(TYPES, _type) ? STYLE[_type].color : titleColor;
  const bColor = _.includes(TYPES, _type)
    ? STYLE[_type].backgroundColor
    : bgColor;
  const btnSize = _.includes(SIZES, size) ? styles[size] : styles.normal;
  let timeout;
  const _onPress = () => {
    timeout && clearTimeout(timeout);
    timeout = setTimeout(onPress, 1000)
  }
  return (
    <TouchableOpacity
      style={[
        style,
        styles.btn,
        btnSize,
        { backgroundColor: bColor, paddingHorizontal: 4 }
      ]}
      onPress={_onPress}
      disabled={disabled}
    >
      {icon}
      <Text
        style={{
          color: _type === 'opacity' ? titleColor : tColor,
          fontSize: titleSize,
          marginHorizontal: title && icon && 4
        }}
      >
        {title}
      </Text>
    </TouchableOpacity>
  );
};
